import React from 'react'
import { useState, useEffect } from 'react'
import { imgs } from "../../compoents/Easy";
import { PlusCircleOutlined, RightOutlined } from '@ant-design/icons';
import { Progress } from 'antd';
import style from './select.module.css'

function Selected() {
  //
  const [showInfo, setShowInfo] = useState(false)
  //是否显示左按钮
  const [leftflag, setLeftFlag] = useState(false)
  const [rightflag, setRightFlag] = useState(true)
  const [bool, setBool] = useState(false)
  //向左移动的偏移量
  const [leftPosition, setLeftPosition] = useState(0);

  const [currentIndex, setCurrentIndex] = useState(0);
  //左下
  const [flag, setflag] = useState(false)
  //移出
  const handleMouseLeave = () => {
    setCurrentIndex(0); // 鼠标移出时显示第一张图片
    setShowInfo(false)
  };
  //样式
  const [contentStyle, setContentStyle] = useState({
    width: '3100px',
    height: "100%",
    display: "flex",
    position: "absolute",
    transition: "left 0.3s linear",
    top: '0',
    left: "0"
  })
  const toright = () => {
    // 重置到最左边  
    setLeftPosition(prev => prev + 500);
    setBool(false)
  }
  const toleft = () => {
    setLeftPosition(prev => prev - 500);
    setLeftFlag(true)
  }
  //左右箭头移动
  // useEffect 中根据 leftPosition 更新样式。
  useEffect(() => {
    setContentStyle(pre => ({
      ...pre,
      left: `${leftPosition}px`
    }))
    // 如果 leftPosition 小于等于 -1000
    if (leftPosition <= -1000) {
      // 设置 rightFlag 为 false，表示不能再向右滚动了
      setRightFlag(false)
      // 设置 leftFlag 为 true，表示可以向左滚动
      setLeftFlag(true)
      setTimeout(() => {
        setBool(true)
      }, 500);
    }
    else if (leftPosition >= 0) {
      // 如果 leftPosition 大于等于 0，表示已经滚动到最左侧
      setRightFlag(true)
      setLeftFlag(false)
    }
  }, [leftPosition])
  return (
    <div className={style.temp}>
      <div className={style.tops}>
        <h1>精选模板</h1>
        <span>查看更多<RightOutlined /></span>
      </div>

      <div className={style.tempmian}>
        <ul style={{ ...contentStyle }}>
          {
            imgs.map((item, index) => {
              //下角标
              const [currentIndex, setCurrentIndex] = useState(0)
              //长图
              const [isHover, setIsHover] = useState(false)
              //鼠标移入
              // handleMouseMove 函数计算鼠标相对于图片的相对位置，以更新 currentIndex
              const handleMouseMove = (event) => {
                setShowInfo(true)
                //左下角显示
                setflag(true)
                //鼠标移入相对于视口的 x 坐标  
                const { clientX, target } = event;
                // console.log(event);
                //用于获取一个元素在视口中的位置和大小  这里是左边  右边=左边+图片的宽度
                const { left, right } = target.getBoundingClientRect();
                // console.log(left, right);
                // 计算滑动比例
                const width = right - left;    //计算出这个图片宽度  210
                // console.log('width', width);
                //获取鼠标相对于图片区域的 x 坐标    计算鼠标在区域内的相对位置（值在 0 到 1 之间） 将相对位置转换为图片的索引
                const offset = ((clientX - left) / width) * imgs[0].imgall.length;
                // console.log(offset);
                // 更新索引
                const newIndex = Math.floor(offset);
                if (newIndex >= 0 && newIndex < imgs[0].imgall.length) {
                  setCurrentIndex(newIndex);
                }
              }
              return item.imgall ? (
                <div className={style.templi}
                  onMouseMove={handleMouseMove}
                  onMouseLeave={handleMouseLeave}
                  key={index}
                >
                  <img
                    src={item.imgall[currentIndex]?.imgs} // 使用可选链以防止错误
                    alt="slider"
                    style={{
                      width: '100%',
                      height: '320px',
                      transition: 'opacity 0.5s ease',
                    }}
                  />
                  <div style={{ fontSize: '16px' }}>深绿色弥散噪点大气新品...</div>
                  <div className={style.work}>华尹工作室 <span>507</span></div>
                  {
                    // 我们展示图片时，判断 flag 去控制页码的显示
                    flag ?
                      <div className={style.pagination}>
                        {currentIndex + 1} / {item.imgall.length}
                      </div> :
                      <div className={style.pagination}>
                        H5
                      </div>
                  }
                  <Progress percent={(currentIndex / (item.imgall.length - 1)) * 100} showInfo={showInfo} className={style.pro} />
                </div>
                // 纯图片
              ) : item.someImage ? ( // 这里是四元运算符部分
                <div key={index} className={style.templi}>
                  <img
                    src={item.someImage} // 渲染没有功能点的图片
                    alt="no feature"
                    style={{ width: '100%', height: '320px' }}
                  />
                  <div style={{ fontSize: '16px' }}>国庆节中国风节日传祝…</div>
                  <div className={style.work}>华尹工作室 <span>507</span></div>
                </div>
                // 视频
              ) : item.videourl ? (
                <div key={index} className={style.templi}>
                  <video
                    src={item.videourl}
                    controls
                    style={{ width: '100%', height: '320px' }}
                  />
                  <div style={{ fontSize: '16px' }}>数字人国庆促销宣传视频</div>
                  <div className={style.work}>华尹工作室 <span>507</span></div>
                </div>
              ) : (
                // 长页
                <li key={index} className={style.templi} onMouseEnter={() => setIsHover(true)}
                  onMouseLeave={() => setIsHover(false)}>
                  <div style={{ height: "320px", overflow: 'hidden' }}>
                    <img src={item.img} alt="" className={`${style.tempimg} ${isHover ? style.scrolling : ''}`} style={{ height: 'auto' }} />
                  </div>
                  <div style={{ fontSize: '16px' }}>橙红色弥散噪点大气新品...</div>
                  <div className={style.work}>华尹工作室 <span>507</span></div>
                </li>
              )
            })
          }
        </ul>
        {
          leftflag ? <i className={style.zuo1} onClick={toright}>&lt; </i> : ''
        }
        {
          rightflag ? <i className={style.you1} onClick={toleft}> &gt;</i> : ''
        }
        {
          bool ? <div className={style.icon}><PlusCircleOutlined /></div> : ''
        }
      </div>
    </div>
  )
}

export default Selected
